<template>
  <div class="dilog-box" v-if="dilogShow">
    <div class="dilog">
      <div class="colse" @click="close()">
        ESC
      </div>
      <div class="title">我的ETH余额{{ toFixed(ethBalance, 4) }}ETH</div>
      <div class="title">
        Mint Your High Tech Ape Yacht Club
      </div>
      <div class="number">
        <span>{{ lastMintId }}</span>
        /<span>{{ maxWitches }}</span>
      </div>
      <div class="box">
        <p class="dd" v-if="whiteList">You Are Whitelisted!</p>
        <p class="dd" v-else>You Are 普通用户!</p>

        <p class="dd">Click MINT to mint your NFT</p>
        <div class="button-box">
          <span @click="reduce()">-</span>
          <span class="num">{{ num }}</span>
          <span @click="add()">+</span>
        </div>
        <div class="btn" @click="mintCommunitySale" v-if="whiteList">
          铸造
        </div>
        <div class="btn" @click="mint" v-else>
          铸造
        </div>
      </div>
      <div class="bot-text">
        <p><span>Price:</span>{{ whiteList ? 0.07 : 0.1 }} ETH+Gas fees</p>
        <p><span>Max:</span> NFT Per Wallet</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getHtaycAbiContract } from "@/utils/contractHelp";
import { mapState } from "vuex";
import {
  formatAmount,
  toFixed,
  accDiv,
  accMul,
  accAdd,
  accSub,
  parseAmount
} from "@/utils/format";
import { exportWeb3Instance } from "@/utils/provider";
import MerkleTree from "@/utils/merkleTree";
const { keccak256, bufferToHex } = require("ethereumjs-util");

export default {
  data() {
    return {
      lastMintId: 0, //mint的最后一个id，即当前铸币数量
      dilogShow: false,
      num: 1,
      isPublicSaleActive: true,
      maxWitches: 0, //nft总量
      maxCommunitySaleWitches: 0, //nft售出数量
      ethBalance: 0, //eth余额
      maxPerWallet: 5, //每个钱包最大可铸币上限
      balanceRemain: 0, //我的账号剩余可铸币数量
      leaves: [
        "0x89Ae4727539D2f96a163627559945ae74a052C2F",
        "0x86Af7b8f32B7979F48B66343F96Ed1F8A35F97E5",
        "0xd503579a294bB8E3cC68b1C38C08879feA23e591",
        "0xED4F055DdCEBF3c4Fb2c54D7D54Ed573df4b1daB",
        "0x63775c48F9977ad98354c0bEDe51c695aC41474e",
        "0xB66c2eF27457e5bd3C50A14ab99b8414a8b6dCa2"
      ],
      whiteList: false //是否为白名单
    };
  },
  watch: {
    account() {
      this.getWhiteList();
      this.getEthBalance();
    }
  },
  created() {
    const merkleTree = new MerkleTree(this.leaves);

    const root = merkleTree.getHexRoot();
    console.log(root, "correctRoot");
    this.getWhiteList();
    this.getEthBalance();
    this.getHtaycInfo();
  },
  computed: {
    ...mapState(["account"])
  },
  methods: {
    async getWhiteList() {
      if (!this.account) {
        this.whiteList = false;
        return;
      }
      const account = exportWeb3Instance().utils.toChecksumAddress(
        this.account
      );
      if (this.leaves.includes(account)) {
        this.whiteList = true;
      } else {
        this.whiteList = false;
      }
    },
    //   获取ETH余额
    async getEthBalance() {
      if (!this.account) {
        this.ethBalance = 0;
        return;
      }
      const simpleWeb3 = exportWeb3Instance();
      const balance = await simpleWeb3.eth.getBalance(this.account);
      this.ethBalance = formatAmount(balance);
    },
    // 获取铸币合约的一些基本数据
    async getHtaycInfo() {
      const htaycAbiContract = getHtaycAbiContract();
      this.lastMintId = await htaycAbiContract.methods.getLastTokenId().call();
      this.maxWitches = await htaycAbiContract.methods.maxWitches().call(); //nft总量

      const balance = await htaycAbiContract.methods
        .balanceOf(this.account)
        .call(); //我的铸币数量

      this.balanceRemain = accSub(this.maxPerWallet, balance);

      this.maxCommunitySaleWitches = await htaycAbiContract.methods
        .maxCommunitySaleWitches()
        .call(); //nft售出数量

      this.isPublicSaleActive = await htaycAbiContract.methods
        .isPublicSaleActive()
        .call(); //查询合约是否开放铸币 普通用户
    },

    // 铸币函数
    async mint() {
      const htaycAbiContract = getHtaycAbiContract();
      // 传入合约，需要格式化，0.1 eth 需要传入 0.1 * 10 ^18 到合约
      const value = parseAmount(accMul(0.1, this.num));
      try {
        const gas = await htaycAbiContract.methods
          .mint(this.num)
          .estimateGas({ from: this.account, value });
        await htaycAbiContract.methods
          .mint(this.num)
          .send({ from: this.account, gas: toFixed(gas * 1.1, 0), value });

        // 如果不发生报错，则上链成功，重新更新数据
        this.getEthBalance();
        this.getHtaycInfo();
        this.$message.success("铸币成功");
      } catch (e) {
        this.$message.error(e);
      }
    },
    // 白名单铸币函数
    async mintCommunitySale() {
      const account = exportWeb3Instance().utils.toChecksumAddress(
        this.account
      );

      const merkleTree = new MerkleTree(this.leaves);
      const index = this.leaves.findIndex(item => item == account);
      const proof = merkleTree.getHexProof(this.leaves[index]);
      const htaycAbiContract = getHtaycAbiContract();
      const value = parseAmount(accMul(0.07, this.num));
      try {
        const gas = await htaycAbiContract.methods
          .mintCommunitySale(this.num, proof)
          .estimateGas({ from: this.account, value });
        await htaycAbiContract.methods
          .mintCommunitySale(this.num, proof)
          .send({ from: this.account, gas: toFixed(gas * 1.1, 0), value });

        // 如果不发生报错，则上链成功，重新更新数据
        this.getEthBalance();
        this.getHtaycInfo();
        this.$message.success("铸币成功");
      } catch (e) {
        this.$message.error(e);
      }
    },
    close: function() {
      this.dilogShow = false;
    },
    show: function() {
      this.dilogShow = true;
    },
    add: function() {
      if (this.num >= 5) {
        return;
      }
      this.num = this.num + 1;
    },
    reduce: function() {
      if (this.num > 1) {
        this.num = this.num - 1;
      }
    },
    toFixed
  }
};
</script>

<style scoped>
@font-face {
  font-family: "thanks";
  src: url(../assets/font/thanks.ttf) format("truetype");
}
@font-face {
  font-family: "zihun";
  src: url(../assets/font/zihun.ttf) format("truetype");
}
@font-face {
  font-family: "scsong";
  src: url(../assets/font/stsong.ttf) format("truetype");
}
.dilog-box {
  width: 100%;
  height: 75%;
  background-color: rgba(109, 106, 109, 0.5);
  position: absolute;
  z-index: 999;
  top: 15%;
}
.dilog {
  width: 100%;
  height: 100%;
  background-image: url(../assets/img/dilogbg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  padding-top: 20px;
}
.title {
  font-size: 48px;
  color: #fff;
  font-family: "zihun" !important;
  line-height: 150px;
  text-align: center;
  width: 100%;
}
.number {
  font-family: thanks !important;
  font-size: 50px;
  color: #fff;
  width: 100%;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 30px;
}
.box {
  width: 800px;
  margin: auto;
  border: 6px solid #353330;
  padding-top: 20px;
  box-sizing: border-box;
}
.box .dd {
  font-size: 36px;
  color: #fff;
  font-family: "zihun" !important;
  text-align: center;
  margin: 0px;
  letter-spacing: 1px;
  line-height: 50px;
}
.button-box {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  overflow: hidden;
}
.button-box span {
  float: left;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #000;
  font-size: 30px;
  line-height: 35px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}
.num {
  line-height: 40px !important;
  font-family: "zihun" !important;
  width: 120px !important;
  background: none !important;
  font-size: 40px !important;
  border-radius: 0px !important;
}
.btn {
  width: 120px;
  height: 36px;
  border-radius: 40px;
  background-color: #04f6ea;
  color: #fff;
  line-height: 36px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  font-weight: bold;
  box-shadow: #000000 1px 2px 1px;
  margin-top: 30px;
  margin-bottom: 30px;
  cursor: pointer;
}
.btn:active {
  box-shadow: none;
}
.colse {
  font-family: "scsong" !important;
  position: absolute;
  top: 0px;
  right: 50px;
  color: #fff;
  font-size: 68px;
  cursor: pointer;
}
.bot-text {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}
.bot-text p {
  letter-spacing: 1px !important;
  text-align: center;
  color: #fff;
  font-size: 36px;
  margin: 0px;
}
.bot-text p span {
  font-family: "zihun" !important;
}
/*  @media screen and (max-width:1800px) {
		  			  .title{
		  				   line-height: 80px;
		  				   font-size: 30px;
		  			  }
					  .number{
						  font-size: 36px;
					  }
					  .box{
						   width: 600px;
					  }
		  	}
		  @media  screen and (max-width:1400px) {
			  .title{
				   line-height: 80px;
				   font-size: 28px;
			  }
			  .box{
				   width: 500px;
			  }
			  .box .dd{
				   font-size: 24px;
			  }
			  .button-box{
			        width: 150px;
			  		margin-left: auto;
			  		margin-right: auto;
			  		margin-top: 20px;
			  		overflow: hidden;
			     }
			  	.button-box span{
			  		 float: left;
			  		 width: 30px;
			  		 height: 30px;
			  		 border-radius: 50%;
			  		 background-color: #000;
			  		 font-size: 18px;
			  		 line-height:28px;
			  		 text-align: center;
			  		 font-weight: bold;
			  		 color: #fff;
			  		 cursor: pointer;

			  	}
				.num{
							   line-height: 30px !important;
							   font-family: "zihun" !important;
							   width: 90px !important;
							  background: none !important;
							  font-size: 28px !important;
							  border-radius: 0px !important;
				}
				.btn{
					 width: 80px;
					 font-size: 20px;
					 height: 32px;
					 font-size: 18px;
					 line-height: 32px;
				}

		  } */
</style>
